<template>
  <div class="community">
    <!-- head -->
    <qy-navigations
    btnType="list"
    :tabSearch="tabSearch"
    :tabFunList="tabFunList"
    @getSearchData="getSearchData"
    ></qy-navigations>
    <!-- content -->
    <div class="content qy-box-space" >
      <div class="container">
        <div class="inner-label" >
          <div>热门</div>
          <div>最新</div>
        </div>
        <!-- main -->
        <div class="main" v-for="(item,index) in dataList" :key="index" >
          <div class="con-left">
            <div class="con-left-head" >{{item.name}}<span>&bull;</span>7小时前<span>&bull;</span>{{item.type}}</div>
            <div class="con-left-body" @click="Controller('detail',item.id)" >{{item.title}}</div>
            <div class="con-left-foot" >
              <div class="con-things" >
                <div class="con-prase" ><i class="el-icon-thumb" @click="addPraise(item.id)"></i><span>{{item.praise_count}}</span></div>
                <div class="con-response" @click="Controller('detail',item.id)" ><i class="el-icon-chat-square"></i><span>{{item.response_count}}</span></div>
                <div class="con-share" ><i class="el-icon-more"></i></div>
              </div>
            </div>
          </div>
          <div class="con-right" >
            <img src="@/assets/img/icon/head.png">
          </div>
        </div>
      </div>
      <div class="label" >
        <!-- 广告列表 -->
        <div v-for="(item,index) in adList" :key="index" >
           <img :src="item.img" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Request from '@/server/http'
import Api from '@/server/api'
export default{
    name:'communityHome',
    data(){
      return{
        /* 导航配置 */
        //Fun列表
        tabFunList:[
          {name:'写文章',type:'link',func:'',path:'/community/compile'}
        ],
        //搜索
        tabSearch:{show:true,func:'getSearchData'},
        //参数
        dataList:[],
        //广告列表
        adList:[
          {img:'',url:''},
          {img:'',url:''}
        ]
      }
    },
    methods:{
      // get init data
      getData(){
        const params = {}
        Request.requestPost(params,Api.apiCommunity.blogList).then((res) => {
          console.log(res)
          this.dataList = res.data.data
        }).catch((err) => {
          console.log(err)
        })
      },
      //文章评论点赞
      addPraise(id){
        const params = {
          id:id
        }
        Request.requestPost(params,Api.apiCommunity.blogAddPraise).then((res) => {
          console.log(res)
          this.getData()
        }).catch((err) => {
          console.log(err)
        })
      },
      // get search data
      getSearchData(param1) {
        const params = {
          title: param1
        };
        Request.requestPost(params, Api.apiCommunity.blogSearch)
          .then((res) => {
            this.$store.commit('community/communitySearchDataGet',res.data.data)
            if(this.$route.path == '/community/home'){
              this.$router.push({path:'/community/search_result'})
            }else{
              this.getData();
            }
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // controller
      Controller(name,id,index){
       switch(name){
         case 'detail':
           this.$router.push('/community/detail?id='+id)
         break;
         default:
         break;
       }
      }
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style','background-color:rgba(204,204,204,0.2)')
    },
    mounted(){
      this.getData()
    }
}
</script>

<style scoped lang="scss">
@import "@/styles/variable.scss";
.el-icon-thumb:hover{
color:$blue-weight;
}
// content
.content{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .container{
      width:75%;
      min-height:100vh;
      margin-right:40px;
      background-color: $white;
      border-radius:4px;
      // 标签页
      .inner-label{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        border-bottom: 1px solid $sidebar-border;
        width:100%;
        height:40px;
        color: $black-light;
        div{
          padding:0px 20px;
          border-left:1px solid $sidebar-border;
        }
        div:first-child{
          border: none;
        }
      }
      // 主内容
      .main{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom:1px solid $sidebar-border;
        // left
        .con-left{
          width:70%;
          height:100%;
          display: flex;
          flex-direction: column;
          padding:0 20px;
          .con-left-head{
            text-align: left;
            color: $gray-weight;
            span{
              padding:0 5px;
            }
          }
          .con-left-body{
            text-align: left;
            color: $black-light;
            font-weight:bold;
            padding-top:5px;
            padding-bottom: 8px;
            font-size: 18px;
            cursor: pointer;
          }
          .con-left-foot{
            text-align: left;
            color: $gray-light;
            .con-things{
              border: 1px solid $sidebar-border;
              width:120px;
              height:25px;
              border-radius:2px;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
              .con-prase{
                width:35%;
                border-right: 1px solid $sidebar-border;
                text-align: center;
                span{
                  padding-left:5px;
                }
              }
              .con-response{
                width:35%;
                border-right: 1px solid $sidebar-border;
                text-align: center;
                span{
                  padding-left:5px;
                }
              }
              .con-share{
                width:30%;
                text-align: center;
              }
            }
          }
        }
        // right
        .con-right{
          width:30%;
          height:100%;
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width:80px;
            height: 80px;
            object-fit: cover;
          }
        }
      }
    }
    .label{
      width:25%;
      height:60vh;
      background-color: $white;
      img{
        width: 100%;
        margin-bottom: 20px;
      }
    }
}

</style>
